<template>
  <div>
    <!-- 搜索条件 -->
    <a-form layout="inline" :model="queryParam" >
      <a-form-item label="会员ID">
        <a-input v-model:value="queryParam.id" placeholder="请输入会员唯一ID" />
      </a-form-item>
      <a-form-item label="关键字">
        <a-input v-model:value="queryParam.keywords" placeholder="请输入手机号/名称" />
      </a-form-item>
      <a-form-item >
        <a-button type="primary" @click="doSearch">搜索</a-button>
      </a-form-item>
    </a-form>
    <a-divider />
    
    <!-- 表格 -->

      <a-table :columns="tables.columns" 
      :data-source="tables.data"
      :pagination="pagination"
      :loading="loading"
      >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'head_img'">
              <a-image
                :width="60" style="border-radius: 10px;"
                :src="record.head_img"
              />
              
            </template>

            <template v-else-if="column.key === 'disabled'">
              <span>
                <a-popconfirm :title="`确定该${record.disabled === 'OFF' ? '启用' : '禁用'}用户吗？`" ok-text="确认" cancel-text="取消" @confirm="confirm(record)">
                    <a-tag
                      :color="record.disabled === 'OFF' ? 'green' : 'geekblue'"
                    >
                      {{ record.disabled === 'OFF'? '禁用':'启用' }}
                    </a-tag>
                </a-popconfirm>
              </span>
            </template>
            
            <template v-else-if="column.key === 'learn_time'">
              {{ (record.learn_time / 3600).toFixed(2) }} 小时
            </template>

            <template v-else-if="column.key === 'role'">
              <a-tag
                  color="geekblue"
                >
                {{ vipMap[record.role] }}
                </a-tag>
            </template>
            
            <template v-else-if="column.dataIndex === 'operation'">
              <a-button type="primary" size="small" @click="update(record)">编辑</a-button>
              <a-divider type="vertical" />
              <a size="small" @click="detail(record)">详情</a>
            </template>
            
          </template>
      </a-table>

      <!-- 修改用户信息 -->
      <UpdateAccountModal/>
  </div>
</template>
<script lang="ts" setup>
import { queryAccountList } from '@/api/user'
import router from '@/router';


let loading = $ref<Boolean>(false)

const vipMap = {COMMON:'普通会员',FOREVER_VIP:'永久会员',ADMIN:'管理员',YEAR_VIP:'年度会员'}

const queryParam = reactive({
  id: '',
  keywords: '',
});

const pagination = reactive({
  defaultCurrent: 1, // 默认当前页数
  defaultPageSize: 10, // 默认当前页显示数据的大小
  total: 0, // 总数，必须先有
  showSizeChanger: true,
  showQuickJumper: true,
  pageSizeOptions: ["10", "20", "50", "100"],
  showTotal: (total: any) => `共 ${total} 条`, // 显示总数
  onShowSizeChange: (current: any, pageSize: number) => {
    pagination.defaultCurrent = 1;
    pagination.defaultPageSize = pageSize;
    getAccountList(); //显示列表的接口名称
  },
  // 改变每页数量时更新显示
  onChange: (current: number, size: number) => {
    pagination.defaultCurrent = current;
    pagination.defaultPageSize = size;
    getAccountList();
  },
})


// 分页数据
const tables = reactive({
  data: [],  // 列表
  //表头
  columns: [
        {
          title: 'ID',
          dataIndex: 'id',
          key: 'id',
        },
        {
          title: '昵称',
          dataIndex: 'username'
        },
        {
          title: '头像',
          dataIndex: 'head_img',
          key: 'head_img'
        },
        {
          title: '手机号码',
          dataIndex: 'phone',
        },
        {
          title: '邮箱',
          dataIndex: 'email',
        },
        {
          title: '角色',
          dataIndex: 'role',
          key: 'role'
        },
        {
          title: '学习时间',
          dataIndex: 'learn_time',
          key: 'learn_time'
        },
        {
          title: '排名',
          dataIndex: 'vip_rank',
        },
        {
          title: '过期时间',
          dataIndex: 'vip_expired',
        },
        {
          title: '积分',
          dataIndex: 'integral',
        },
        {
          title: '状态',
          dataIndex: 'disabled',
          key: 'disabled',
        },
        {
          title: '注册时间',
          dataIndex: 'gmt_create',
        },
        {
          title: '操作',
          dataIndex: 'operation',
        },
    ]
})

//加载数据
const getAccountList = async (id?:string,keywords?:string) => {
  loading = true
  const res = await queryAccountList({ page: pagination.defaultCurrent, size: pagination.defaultPageSize,id,keywords })
  pagination.total = res.data.total_record
  tables.data = res.data.current_data
  loading = false
}

//搜索
const doSearch = async ()=>{
  await getAccountList(queryParam.id,queryParam.keywords)
}

//初始化数据
onMounted(async () => {
  await getAccountList()
})

</script>

